<template>
	<view class="comment">
		<view class="item" v-for="(item, index) in list" :key="index" @click="onClick(item)">
			<view class="top">
				<view class="row align-height">
					<image class="avatar" src="../../static/images/Avatar-1.png"></image>
					<view class="column">
						<text class="name">匿名</text>
						<text class="time">2023-08-12 11:32:42</text>
					</view>
				</view>
				<uni-rate v-model="rateValue" size="20" />
			</view>
			<view class="content">
				<text>
					沟通的很顺畅，多自己的人生有了新的规划，对今后的职业生涯有了新的期待，非常感谢老师的耐心指导！
				</text>
				<view class="tags">
					<uni-tag text="思路清晰" custom-style="background-color: #f8f8f8; border-color: #f8f8f8; color: #333;">
					</uni-tag>
					<uni-tag text="反馈准确" custom-style="background-color: #f8f8f8; border-color: #f8f8f8; color: #333;">
					</uni-tag>
					<uni-tag text="温和亲切" custom-style="background-color: #f8f8f8; border-color: #f8f8f8; color: #333;">
					</uni-tag>
					<uni-tag text="耐心倾听" custom-style="background-color: #f8f8f8; border-color: #f8f8f8; color: #333;">
					</uni-tag>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "yzb-comment",

		props: {
			list: Array
		},

		data() {
			return {
				rateValue: 5,
			};
		},

		methods: {

			onClick(item) {
				this.$emit('click', item);
			},

		}
	}
</script>

<style lang="scss">
	.comment {
		.item {
			display: flex;
			flex-direction: column;
			padding: 20upx 0;
			border-bottom: 1upx solid #f8f8f8;

			.top {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-start;

				.avatar {
					width: 80upx;
					height: 80upx;
					border-radius: 40upx;
					margin-right: 20upx;
				}

				.name {
					font-size: 28upx;
				}

				.time {
					font-size: 26upx;
					color: #999;
				}
			}

		}

	}
</style>